<template>
    <div class="data-item-block">
        <img :src="data.image" width="200px" height="150px">
        <div class="info">
            <div class="header">
                <div v-if="data.official" class="header-label">{{ $t('langObj.official') }}</div>
                <div class="header-title">{{ data.dataName }}</div>
                <div class="header-timeTag">
                    {{
                        getRelativeTimeString((data.updateTime || data.createTime) / 1000)
                    }}
                </div>
            </div>
            <div class="description">
                {{ data.dataDesc }}
            </div>
            <div class="footer">
                <div class="footer-owner">
                    <my-icon icon="ios-person-outline" size="15">{{ data.owner }}</my-icon>
                </div>
                <div class="footer-relatedInfo">
                    <my-icon icon="ios-thumbs-up-outline" size="15">{{ data.vote }}</my-icon>
                    <my-icon icon="ios-eye-outline" :size="15">{{ data.watched }}</my-icon>
                    <my-icon icon="ios-cloud-download-outline" :size="15">{{ data.download }}</my-icon>
                    <my-icon icon="ios-barcode-outline" :size="15" v-if="data.size">{{ data.size }}</my-icon>
                    <my-icon icon="ios-document-outline" :size="15" v-if="data.fileType">0</my-icon>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getRelativeTimeString } from "@/utils/time";
export default {
    name:"dataItem",
    props:['data'],
    methods: {
        getRelativeTimeString
  }
}
</script>

<style lang="scss" scoped>
    .data-item-block{
        width: 1200px;
        padding: 50px 25px;
        background-color: #fff;
        border-top: 1px solid #f7f7f7;
        display: flex;
    }
    .info {
        flex: 1;
        margin-left: 22px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }
    .header {
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }
    .header-label{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 16px;
        padding: 0 5px;
        border-radius: 3px;
        background-color: #00cc66;
        font-size: 12px;
        color: #fff;
        font-weight: 500;
    }
    .header-title {
        margin-left: 5px;
        font-size: 18px;
        color: #17233d;
    }
    .header-timeTag{
        color: #808695;

        &::before{
            content: "\B7";
            margin: 0 5px;
        }
    }
    .description {
        flex: 1;
        margin-top: 12px;
        font-size: 13px;
        line-height: 1.6;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }
    .footer {
        margin-top: 12px;
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
    }
    .footer-relatedInfo div + div {
        margin-left: 10px;
    }
</style>


